<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Face_Recognition</title>
</head>
<link rel="stylesheet" href="public/css/main.css">
<link rel="stylesheet" href="public/css/layui.css">
<script type="text/javascript">

/* Copyright (C) 2007 Richard Atterer, richard漏atterer.net
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License, version 2. See the file
   COPYING for details. */

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = false;

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "http://192.168.0.103:8080/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

//Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
    var del = finished.shift(); // Delete old image(s) from document
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>
<body id = 'particles-js' onload="createImageLayer();">
  <!-- <div id = 'particles-js'>
  </div> -->
  <script src="public/js/particles.js"></script>
  <script>
    particlesJS.load('particles-js','/public/json/particles.json',function(){
    console.log('particles.json loading');
})
</script>
<div id="webcam"><noscript><img src="http://192.168.0.103:8080/?action=snapshot" /></noscript></div>
 <!-- <div  id ='table' class="table-responsive">
  <table class="table table-striped">
      {{ each face }}
      <tr>
      
          <td>{{ $value.Name }}</td>
          <td>{{ $value.Department }}</td>
          <td>{{ $value.Created_time }}</td>
          <td>{{ $value.Status }}</td>
      </tr>
      
      {{ /each }} -->
  
  </table>
  </div>
<table class="layui-table" >
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Profile Picture</th>
      <th id="Name">Name</th>
      <th id ="Department">Department</th>
      <th id="Time">Time</th>
    </tr> 
  </thead>
  <tbody id = 'userlist'>
  </tbody>
</table>

<input type="text" id="code" value="             Recognizing......">

</body>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script>
       
        function clock(){
            
          //The first parameter is the request address
          //The second parameter is to sent the data to the server
          //The third parameter will return the result ,after the server processes, 
            $.post('/userlist',{},function(data){
            console.log(data)
            $('#userlist').children("tr").remove()
            for (var i=0; i<data.face.length; i++){
                $('<tr><td><img src='+data.face[i].Image+'></td><td>'+data.face[i].Name+'</td><td>'+data.face[i].Department+'</td><td>'+data.face[i].Created_time+'</td></tr>')
                .appendTo('#userlist')
                }
                if(data.code == 0){
                    $('#code').val("             Recognizing......")
                }
                else if(data.code == 1){
                    $('#code').val("            Face recognition is successful") 
                }
                
        
            })
            
        }
     //When the browser executes all the html codes, it automatically excutes the following codes.
      $(function(){
        var int=self.setInterval('clock()',1000)
    })
    
    </script>

</html>
